<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page import="models.Brand, models.Category" %>
<%
    response.setHeader("Pragma", "no-cache");
    response.setHeader("Cache-Control", "no-cache");
    response.setDateHeader("Expires", 0);
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>

        <link rel="stylesheet" href="<%=request.getContextPath()%>/style/style.css" type="text/css"/>
        <link rel="stylesheet" href="<%=request.getContextPath()%>/style/normalize.css" type="text/css"/>
        <link rel="stylesheet" href="<%=request.getContextPath()%>/style/reset.css" type="text/css"/>
        <title>Products</title>
        <!--<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>-->
        <script  src="<%=request.getContextPath()%>/products/js/jquery.mobile-1.1.0.min.js"></script>
        <!-- include jQuery + carouFredSel plugin -->
        <link rel="stylesheet" href="<%=request.getContextPath()%>/style/idangerous.swiper.css">
        <link rel="stylesheet" href="<%=request.getContextPath()%>/style/style.css?v=1.8">
        <link rel="stylesheet" href="<%=request.getContextPath()%>/style/swiper-demos.css?v=1.8">
        <script  src="<%=request.getContextPath()%>/products/js/libs/jquery-1.7.1.min.js"></script>
        <!-- Swiper -->
        <script  src="<%=request.getContextPath()%>/products/js/idangerous.swiper-1.9.1.min.js"></script>
        <!-- Swiper Scrollbar plugin -->
        <script  src="<%=request.getContextPath()%>/products/js/idangerous.swiper.scrollbar-1.2.js"></script>
        <!-- Demos code -->
        <script  src="<%=request.getContextPath()%>/products/js/swiper-demos.js"></script>
        <link rel="stylesheet" href="<%=request.getContextPath()%>/style/jquery-ui.css" type="text/css" />
        <!--<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>-->
        <script  src="<%=request.getContextPath()%>/products/js/jquery-ui.js"></script>



        <script>
            var Active = false;
            //Jquery slider
            $(function() {
                $("#slider-range-max").slider({
                    range: "max",
                    min: -1,
                    max: 1,
                    animate: "slow",
                    step: 0.001,
                    slide: function(event, ui) {
                        $("#amount").val(ui.value);
                    }
                });
                $("#amount").val($("#slider-range-max").slider("value"));

            });

            $(function() {
                //  Do whatever in here that happens every 3 seconds
                $.post("/cfr/products/start_analyzing.jsp", {name: "John", time: "2pm"});
            });
            
//            $(function() {
//            
//                var intervalID = setInterval(function() {
//                    //  Do whatever in here that happens every 3 seconds
//                    $.post("/cfr/products/load.jsp", {name: "John", time: "2pm"},
//                    function loading(data) {
//                        if (!Active) {
//                            if (data > 0.2) {
//                                Active = true;
//                                $(".more_info").slideDown();
//                            }
//                        }
//                        if (Active) {
//                            if (data < 0) {
//                                Active = true;
//                                $(".more_info").slideUp();
//                                    
//                            }
//                        }
//                        $("#slider-range-max").slider("option", "value", data);
//            
//                    });
//                },100);
//                //                setTimeout(function() {
//                //                    clearInterval(intervalID);
//                //                }, 13000);
//            });


            $(document).ready(function() {
                $(".btn1").click(function() {
                    $(".more_info").slideUp();
                    $("div#down").delay(800).show(0);
                });
                $(".btn2").click(function() {
                    $(".more_info").slideDown();
                    $("div#down").hide();
                });
                $(".btnhelp1").click(function() {
                    $(".descriptionHelp").slideUp();
                    $("div#down").delay(800).show(0);
                });

                $(".btnhelp2").click(function() {
                    $(".help-overlay").toggle("slow");
                });
            });

        </script>


    </head>
    <body>
        <!--        <script language=JavaScript>
                    
                    var message="Function Disabled!";
        
                    ///////////////////////////////////
                    function clickIE4(){
                        if (event.button==2){
                            alert(message);
                            return false;
                        }
                    }
        
                    function clickNS4(e){
                        if (document.layers||document.getElementById&&!document.all){
                            if (e.which==2||e.which==3){
                                alert(message);
                                return false;
                            }
                        }
                    }
        
                    if (document.layers){
                        document.captureEvents(Event.MOUSEDOWN);
                        document.onmousedown=clickNS4;
                    }
                    else if (document.all&&!document.getElementById){
                        document.onmousedown=clickIE4;
                    }
        
                    document.oncontextmenu=new Function("return false")
        
                      
                </script>-->
        <div id="wrapper">
            <div class="help-overlay">
                <div id="help">
                    <button class="btnhelp2">help</button>
                </div>
                <img src="<%=request.getContextPath()%>/style/images/help_page.png"/>
            </div>
            <div id="header">
                <div class="container">

                    <div id="back">
                        <a href="javascript:javascript:history.go(-1)"></a>
                    </div>

                    <div id="home">
                        <a href="<%=request.getContextPath()%>"></a>
                    </div>

                    <div id="help">
                        <a class="btnhelp2"></a>
                    </div>


                    <div id="down">
                        <button class="btn2">Slide down</button>
                    </div>
                    <div id="byAmfi"><h1>by AMFI</h1></div>

                </div><!-- container close -->
            </div> <!-- header close -->

            <div id="main">

                <c:choose>

                    <c:when test="${amountOfProducts != 0}">
                        <!--Wanneer er gebruikers opgeslagen zijn, worden ze hier getoond--> 

                        <div class="mc-device">


                            <div class="mc2">
                                <div class="swiper-container mc-control">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide" style="width:${productSliderWidth}px;">
                                            <c:forEach var="tempProduct" items="${productList}">
                                                <img src="<%=request.getContextPath()%>/products/uploads/${tempProduct.product_image}"/>
                                            </c:forEach>
                                            <c:forEach var="tempProduct" items="${productList}">
                                                <img src="<%=request.getContextPath()%>/products/uploads/${tempProduct.product_image}"/>
                                            </c:forEach>
                                            <c:forEach var="tempProduct" items="${productList}">
                                                <img src="<%=request.getContextPath()%>/products/uploads/${tempProduct.product_image}"/>
                                            </c:forEach>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="smilyMeter">
                                <div id="slider-range-max"></div>                            
                            </div>                      


                            <div class="home-device"> <a class="arrow-left" href="#"></a> <a class="arrow-right" href="#"></a>

                                <div class="swiper-main">
                                    <div class="swiper-container swiper1">
                                        <div class="swiper-wrapper">
                                            <c:forEach var="tempProduct" items="${productList}">
                                                <div class="swiper-slide">                                                
                                                    <div class="more_info">
                                                        <div class="container">
                                                            <div class="info_text">
                                                                <div class="info_left">
                                                                    <div class="info_container">
                                                                        <div class="name"><h2>${tempProduct.product_name} 
                                                                                <span class="price"> 

                                                                                    <c:choose>
                                                                                        <c:when test="${tempProduct.product_price=='0'}">
                                                                                            Price on Request</span>
                                                                                        </c:when>

                                                                                    <c:otherwise>
                                                                                        € ${tempProduct.product_price}</span>
                                                                                    </c:otherwise>
                                                                                </c:choose>



                                                                            </h2></div>                                     
                                                                        <div class="brand">
                                                                            <c:set var="brand" value="${tempProduct.brand}"/>
                                                                            <% Brand merk = (Brand)pageContext.getAttribute("brand");
                                                                            String brand_name = merk.getBrand_name();
                                                                            String brand_image = merk.getBrand_image();
                                                                            pageContext.setAttribute("brand_image", brand_image);
                                                                            pageContext.setAttribute("brand_name", brand_name);
                                                                            %>
                                                                            <b>Brand:</b>
                                                                            <p> ${brand_name}</p>
                                                                        </div>
                                                                        <div class="materials"> 
                                                                            <b>Materials:</b>
                                                                            <p>${tempProduct.product_material}</p> 
                                                                        </div>
                                                                        <div class="care">
                                                                            <b>Care:</b>
                                                                            <p>${tempProduct.product_care}</p>
                                                                        </div>
                                                                    </div>         
                                                                </div>
                                                                <div class="info_right">
                                                                    <div class="info_container">
                                                                        <div class="description">
                                                                            <b>Description:</b>
                                                                            <p>${tempProduct.product_description}</p>
                                                                        </div>
                                                                        <div class="author">                                                                            
                                                                            <p><strong>by:</strong> ${tempProduct.product_author}</p>
                                                                            <img class="brand_image"src="<%=request.getContextPath()%>/brand/uploads/${brand_image}"/>
                                                                        </div>        
                                                                    </div>                                                                    
                                                                </div>                                                                                                              
                                                            </div>                                                        
                                                        </div>
                                                        <div id="up">
                                                            <button class="btn1">Slide up</button>  
                                                        </div>
                                                    </div>


                                                    <img src="<%=request.getContextPath()%>/products/uploads/${tempProduct.product_image}"/>
                                                </div>
                                            </c:forEach>

                                        </div><!-- close swiper wrapper -->
                                    </div><!-- close swiper container -->
                                </div><!-- close swiper-main-->
                            </div><!-- close home-devise-->


                            <div class="pagination pagination1"></div>



                        </c:when>

                        <c:otherwise>
                            <!-- Als er geen gebruikers zijn, wordt deze melding getoond -->
                            <div class="errormessage">
                                <h1>Whoops!</h1>
                                <p>No products found.</p>
                            </div>
                        </c:otherwise>

                    </c:choose>

                </div><!-- mc-device close -->


            </div><!-- main close -->


            <div id="footer">
                <div class="container">
                    <div id="logo_footer"></div>
                </div><!-- container close -->
            </div><!-- footer close -->

        </div><!-- total wrapper close -->


    </body>

</html>
